<template>
  <div id="home">
    <div class="topContent"  v-show="!roleShow">
      <div class="mapDisplay mapMoveT">
        <location @click="displayRole" v-for="(value, index) in 17"></location>
        <img src="image/map2.png" alt="" class="maps">
      </div>
    </div>
    <div class="roleContent" v-if="roleShow">
      <roleList :Place="place"></roleList>
    </div>
  </div>
</template>

<script>
import location from '@/components/location'
import roleList from '@/components/roleList'
import { mapState, mapMutations } from "vuex";

export default {
  name: "Home",
  data() {
    return {
      "place": null
    }
  },
  mounted() {
    document.querySelector('.topContent').style.height = document.documentElement.clientHeight + 'px';
    this.mapMove();
  },
  components: {
    location,
    roleList,
  },
  async created() {
    try {
      await this.axios.get('./db/mapData.json').then((response) => {
        const res = response.data.mapData;
        for(let i = 0; i < res.length; i++) {
          let docu = document.getElementsByClassName('logo')[i];
          let docuImg = document.getElementsByClassName('logoImg')[i];
          docu.style.left = res[i].left;
          docu.style.top = res[i].top;
          docu.setAttribute("name", res[i].name);
          docuImg.style.backgroundPositionX = res[i].backgroundLeft;
          docuImg.style.backgroundPositionY = res[i].backgroundTop;
        }
      })
    } catch (error) {
      console.log(error.message);
    }
  },
  methods: {
    ...mapMutations(['roleDisplay']),
    // 地图拖拽
    mapMove() {
      let maps = document.getElementsByClassName('mapDisplay')[0];
      let isDrag = false;                 // false 暂不拖拽
      let disX,disY;                    // 图片相对于图片的位置

      maps.onmousedown = function(e){     // 鼠标按下时
        // console.log(maps.offsetLeft, maps.offsetTop);
        maps.style.left = maps.offsetLeft+'px';     // 防止返回到最初的 top 和 left
        maps.style.top = maps.offsetTop+'px';
        maps.classList.remove("mapMoveT");
        isDrag = true;
        this.style.cursor='pointer';
        e = e||window.event;
        //鼠标位置
        let x1 = e.clientX;
        let y1 = e.clientY;
        //鼠标相对于图片的位置
        disX = x1 - maps.offsetLeft;
        disY = y1 - maps.offsetTop;

        document.onmousemove = function(e){   // 鼠标移动时
          if(!isDrag){
            return;
          }
          e = e||window.event;//兼容性写法
          //鼠标位置
          let x = e.clientX;
          let y = e.clientY;
          //修改图片位置
          maps.style.left = x - disX+'px';
          maps.style.top = y - disY+'px';

          // 阻止默认事件，讲道理我也不知道阻止了什么，但不这样就无法拖动
          return false;
        }
      }

      document.onmouseup = function(){    // 鼠标抬起时
        maps.classList.add("mapMoveT");
        isDrag = false;
        maps.style.cursor='default';
      }
    },
    // 地区角色点击显示
    displayRole(event) {
      this.roleDisplay();
      this.place = event.currentTarget.getAttribute("name");
    }
  },
  computed: {
    ...mapState(['roleShow']),
  },
  watch: {
    '$store.state.screenHeight': function (val) {        //监听屏幕宽度变化
      if(val > 750) {
        document.querySelector('.topContent').style.height = val + 'px';
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/common";

//@keyframes mapF {
//  0% { transform: translate(0px); }
//  25% { transform: translate(-800px, -1000px);  }
//  50% { transform: translate(-1400px, 0px);  }
//  75% { transform: translate(100px, -1000px);  }
//  100% { transform: translate(0px);  }
//}
@keyframes mapT {
  0% { }
  25% { left: -800px; top: -1000px; }
  50% { left: -1400px; top: 0; }
  75% { left: 100px; top: -1000px; }
  100% { }
}

.mapMoveT {
  animation: mapT 60s linear infinite;
}

.topContent {
  width: 100%;
  height: 750px;
  overflow: hidden;
  position: relative;
  .mapDisplay {
    //animation: mapT 60s linear infinite;
    position: absolute;
    left: 0px;
    top: 0px;
    .maps {
      opacity: 0.6;
    }
  }
}

.roleContent {
  height: 100%;
  width: 100%;
}

</style>